<template>
  <card :showDivider="false">
    <table-index :table="table" @loadData="loadData">
      <template #orderCode="{ record }">
        <a-link v-if="usePermission('svms:order:etc-order.detail')" @click="() => onClickETCOrder(record)">{{ record.orderCode }}</a-link>
        <div v-else>{{ record.orderCode }}</div>
        <!-- 订单标签 -->
        <a-space v-if="record.orderLabel">
          <tag type="primary">{{ record.orderLabel }}</tag>
        </a-space>
      </template>
      <template #feeOrgName="{ record }">
        <div>{{ record.licenseNo }}</div>
        <div>{{ record.carModelName }}</div>
      </template>
      <template #ETCOrder="{ record }">
        <div v-if="record.actualStartTime">实际开始: {{ record.actualStartTime }}</div>
        <div v-if="record.endTime">预计结束: {{ record.endTime }}</div>
        <div v-if="record.actualEndTime">实际结束: {{ record.actualEndTime }}</div>
      </template>
    </table-index>
  </card>
</template>

<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApiNoPage, useTable } from '@/hooks/table'
  import { getEtcOrder } from '@/api/order/sOrder'
  import useNavigate from '@/hooks/useNavigate'
  import { usePermission } from '@/hooks/usePermission'

  const { navigateTo } = useNavigate()

  const props = defineProps({
    orderId: Number,
    orderType: Number,
  })

  const queryParam = reactive<any>({})

  // table 配置
  const table = useTable({
    columns: [
      { title: 'ETC订单号', slotName: 'orderCode', fixed: 'left', width: 250 },
      { title: 'ETC设备号', dataIndex: 'etcCode', width: 160 },
      { title: '车辆信息', dataIndex: 'feeOrgName', slotName: 'feeOrgName' },
      { title: '所属门店', dataIndex: 'siteName' },
      { title: 'ETC订单状态', dataIndex: 'orderStatusName', width: 120 },
      { title: '下单人手机号', dataIndex: 'mobile', width: 140 },
      { title: 'ETC订单周期', slotName: 'ETCOrder', width: 250 },
      { title: 'ETC租期', dataIndex: 'rentDays', width: 120 },
      {
        title: 'ETC租赁费用',
        dataIndex: 'amt',
        unit: '元',
        width: 150,
      },
      { title: '下单时间', dataIndex: 'orderCreateTime', width: 180, fixed: 'right' },
    ],
    pagination: false,
  })

  const loadData = () => {
    const fn = useFetchTableDataApiNoPage(table, queryParam, getEtcOrder)
    fn()
  }

  const onClickETCOrder = (record: any) => {
    navigateTo(`/etc-order/detail/${record.id}`, `${record.orderCode}-详情`)
  }

  onMounted(() => {
    queryParam.refId = props.orderId
    queryParam.refType = props.orderType

    loadData()
  })
</script>

<style lang="less" scoped></style>
